<style scoped>
    .el-footer{
        text-align: center;
        padding: 10px 0 20px;
        color: #9ea7b4;
    }
    .content{
        width:100%;
        height:600px;
    }
    .el-button{
        margin-top: 10px;
        float:left;
    }
</style>

<template>
    <el-container>
        <!-- 侧边栏 -->
        <el-aside width><Aside :isCollapse="isCollapse"></Aside></el-aside>
        <!-- 主体 -->
        <el-container width:width>
            <el-header>
                <el-button icon="el-icon-menu" circle @click="TroggerCollapse"></el-button>
                <user/>
            </el-header>
            <el-main>
                <div>
                    <!-- 面包屑导航 -->
                    <el-breadcrumb separator="/">
                        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>        
                <div class="content">
                    <!-- 内容区域 -->
                     <router-view/>
                </div>
            </el-main>
            <el-footer>Copyfor ©2019  LinkSatCom</el-footer>
        </el-container>
    </el-container>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import './main.less';
import Aside from './Aside.vue';
import User from './user.vue';
@Component({
    components: {
        Aside,
        User,
    },
})
export default class Main extends Vue {
    public isCollapse: boolean = false;
    public width = 1;

    public TroggerCollapse(): void {
        this.isCollapse = !this.isCollapse;
    }
}
</script>